<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>新版导航栏</title>
        <link rel="stylesheet" href="/static/layui/css/layui.css">
        <link rel="stylesheet" href="/static/v1/css/base/coach.css">

    </head>
    <body>
        <div class="layui-container">
            <div class="layui-row" id="view" style="margin:10px auto">
                <fieldset class="layui-elem-field"
                          th:each="model,iter :${modelList}">
                    <legend>
                        <span class="layui-badge"
                              th:classappend="${model.badgeClass}"
                              th:text="${model.modelName}">
                        </span>
                    </legend>
                    <div class="layui-field-box">
                        <button class="layui-btn layui-btn-lg layui-btn-green btn-link"
                                style="margin: 5px"
                                th:each="info,iter :${model.infoList}"
                                th:text="${info.linkName}"
                                th:classappend="${info.btnClass}"
                                th:attr="data-url=${info.linkUrl}">
                        </button>
                    </div>
                </fieldset>
            </div>
            <div class="layui-row" style="margin:10px auto">
            </div>
        </div>

        <script src="/static/layui/layui.js"></script>
        <script>
            //一般直接写在一个js文件中
            layui.use(['layer', 'form', 'laytpl', 'util', 'element'], function () {
                var layer = layui.layer
                    , form = layui.form, laytpl = layui.laytpl;
                var $ = layui.$;
                var util = layui.util;
                var element = layui.element;


                $("#view").on('click', ".btn-link", function () {
                    var linkUrl = $(this).attr("data-url");
                    if ($(this).hasClass("layui-btn-disabled") || linkUrl == "") {
                        layer.msg("该导航信息暂未使用")
                    } else {
                        window.open(linkUrl, "_blank")
                    }
                })
                //执行
                util.fixbar({
                    bar1: true,
                    click: function (type) {
                        if (type === 'bar1') {
                            layer.msg("欢迎使用hao-tool，即将返回旧版导航")
                            setTimeout(function () {
                                window.open("http://navi.lymtr.cn")
                            }, 2000)
                        }
                    }
                });


            });
        </script>
    </body>
</html>
